<template>
  <view>
    <view class="wrap">
      <radio-group @change="radioChange">
        <label class="radio flex flex-ai-c" v-for="(item,index) in list" :key="index">
          <radio :value="index + ''" :checked="index == checkoutIndx" color="#FBD220"/>
          <view class="info flex flex-jc-sb flex-ai-c" >
            <view class="info-left">
              <view class="info-left-item">
                <i-icon icon="iconwodehaibao" type="single" size="34rpx" color="#999"></i-icon>
                <text class="info-left-text name">{{ item.name }}</text>
              </view>
              <view>
                <i-icon icon="iconlianxi" type="single" size="34rpx" color="#999"></i-icon>
                <text class="info-left-text">{{ item.phone }}</text>
              </view>
            </view>
            <view class="info-right" @click.stop="del(item.id)">
              <i-icon icon="iconlajitong" type="single" size="34rpx" color="#999"></i-icon>
              <text class="info-right-text">删除</text>
            </view>
          </view>
        </label>
      </radio-group>
    </view>
    <!-- 无内容默认图片 -->
    <view v-show="showimg">
      <defaultImg msg="暂无联系人"></defaultImg>
    </view>
    <view class="btn">
      <button class="btn-primary" @click="add">添加新联系人</button>
    </view>

    <u-popup class="popup" v-model="showModal" mode="bottom" border-radius="10">
      <view class="title">添加联系人</view>
      <view class="item flex">
        <view class="item-left">姓名</view>
        <view class="item-right">
          <input placeholder="请输入姓名" v-model="name" maxlength="10"/>
        </view>
      </view>
      <view class="item flex">
        <view class="item-left">电话</view>
        <view class="item-right">
          <input placeholder="请输入联系电话" v-model="phone" type="number" maxlength="11"/>
        </view>
      </view>
      <view class="btn-wrap flex">
        <view class="btn-left" @click="cancel">取消</view>
        <view class="btn-right" @click="comfire">确定</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import defaultImg from '../../components/defaultImg/defaultImg'
export default {
  data() {
    return {
      pageIndex: 1,
      list: [],
      total: NaN,
      showimg: false, //是否显示缺省
      showText: false, //是否更多
      checkoutIndx: 99999999,
      showModal: false, //弹框
      name: '',
      phone: '',
    }
  },
  components: {
    defaultImg,
  },
  onLoad(e){
    if(e.contactIndex){
      this.checkoutIndx = e.contactIndex
    }

    this.getList()
  },
  onReachBottom() {
    this.getList()
  },
  methods: {
    //列表
    getList() {
      if(this.showText){
        return false
      }
      uni.showLoading({
        title: '加载中'
      })
      this.$api.common.getContactList({
        pageIndex: this.pageIndex,
        pageSize: 10,
      }).then(res => {
        if(res.data.total === 0){
          this.total = res.data.total
          this.showimg = true
        } else {
          this.showimg = false
          if(this.pageIndex === 1) {
            this.list = []
            this.list = res.data.list
            this.total = res.data.total
          }else {
            this.list = this.list.concat(res.data.list)
          }
          if(this.total <= this.pageIndex * 10){
            this.showText = true
          } else {
            this.pageIndex++
          }
        }
        uni.hideLoading()
      }).catch( e => {
        uni.hideLoading()
      })
    },

    resetList(){
      this.total = NaN;
      this.showText = false;
      // this.checkoutIndx = '';
      this.pageIndex = 1;
      this.list = []
      this.getList()
    },

    //删除
    del(id) {
      this.$api.common.delContact({id}).then(res => {
        uni.showToast({
          title: '删除成功',
          icon: 'none'
        })
        this.resetList()
      })
    },

    //选择
    radioChange(e) {
      console.log(111,this.list[e.detail.value])
      this.checkoutIndx = e.detail.value
      uni.$emit('selContact', {
        id: this.list[this.checkoutIndx].id,
        name: this.list[this.checkoutIndx].name,
				phone:this.list[this.checkoutIndx].phone,
        index: this.checkoutIndx,
      })
      uni.navigateBack()
    },

    add(){
      this.showModal = true;
    },

    //关闭
    cancel(){
      this.showModal = false;
      this.name = "";
      this.phone = "";
    },

  //添加联系人
    comfire(){
      if(!this.name){
        uni.showToast({
          title: '请填写联系人姓名',
          icon: 'none'
        })
        return
      }
      if(this.phone.length < 11 || !(/^1[3456789]\d{9}$/.test(this.phone)) ){
        uni.showToast({
          title: '请正确填写联系人电话',
          icon: 'none'
        })
        return
      }
      this.$api.common.editContact({
        id: '',
        name: this.name,
        phone: this.phone,
      }).then(res => {
        console.log(res)
        if(res.data){
          uni.showToast({
            title: '添加成功',
            icon: 'none'
          })
        }
        this.cancel()
        this.resetList()
      }).catch(e => {

      })
    },

  }
}
</script>

<style lang="scss" scoped>
page {
  background: #f6f6f6;
}
  .btn {
    position: fixed;
    bottom:0;
    padding: 26rpx;
    background: #fff;
    width: 100%;
  }

  .radio {
    margin: 24rpx;
  }

  .info {
    flex:1;
    margin-left: 20rpx;
    padding: 30rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.14);
    border-radius: 10rpx;

    .info-left {
      .info-left-item {
        padding-bottom: 10rpx;
      }
      .info-left-text {
        display: inline-block;
        padding-left: 28rpx;
        font-size: 30rpx;
        color: #666;
        font-weight: 500;
      }

      .name {
        color: #333;
      }
    }

    .info-right {
      .info-right-text {
        display: inline-block;
        padding-left: 18rpx;
        font-size: 30rpx;
        color: #999;
        font-weight: 500;
      }
    }

  }

  .popup {
    .title {
      padding: 30rpx 0;
      font-size: 36rpx;
      font-weight: 500;
      color: #333333;
      text-align: center;
    }

    .item {
      padding: 60rpx 42rpx 0 32rpx;

      .item-left {
        padding-right: 35rpx;
        text-align: center;
        font-size: 34rpx;
        color: #333333;
      }

      .item-right {
        flex: 1;
        border-bottom: 2rpx solid #eee;
      }
    }

    .btn-wrap {
      padding: 80rpx 40rpx;

      .btn-left {
        width: 50%;
        height: 88rpx;
        line-height: 88rpx;
        font-size: 32rpx;
        text-align: center;
        background: #333;
        color: #FFE23E;
        border-radius: 44rpx 0 0 44rpx;
      }
      .btn-right {
        width: 50%;
        height: 88rpx;
        line-height: 88rpx;
        text-align: center;
        font-size: 32rpx;
        background: linear-gradient(-90deg, #FBD220, #FFE23E);
        color: #333;
        border-radius: 0 44rpx 44rpx 0;
      }
    }
  }
/deep/ uni-button:after{
  border:none;
}
.wrap{
	margin-bottom: 150rpx;
}
</style>